<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css"></style>
</head>
<body>
    <h1>XML DOM TABLE - 自定义</h1>
    <hr>
    
    行数: <input type="text" name="num1" id="num1">
    列数: <input type="text" name="num2" id="num2">
    <button onclick="createTab()" >生成表格</button>

    <div id="tables"></div>


    <script>
        function createTab() {
            // 获取要生成的行列数
            var rows = document.getElementById('num1').value;
            var cols = document.getElementById('num2').value;
            // 创建table....
            var tab = document.createElement('table');
            var tr = document.createElement('tr');

            tab.width = 800;
            tab.border = 1;
            tab.cellSpacing = 0;
            tab.cellPadding = 5;

            tables.appendChild(tab);
            tab.appendChild(tr);

            // 创建表头
            for (var i = 0; i < cols; i++) {
                var th = document.createElement('th');
                th.innerHTML = i;
                tr.appendChild(th);
            }

            // rows x cols 创建行列
            for (var i = 0; i < rows; i++) {
                tr = document.createElement('tr');
                tab.appendChild(tr);

                if (i%2 == 0) {
                    tr.style.backgroundColor = '#f90';
                }

                for (var j = 0; j < cols; j++) {
                    td = document.createElement('td');
                    td.innerHTML = i + '-' + j;
                    tr.appendChild(td);
                }
            }
        }


    </script>
</body>
</html>